﻿@page "/docs/extensions/chart-zoom"

<Seo Canonical="/docs/extensions/chart-zoom" Title="Blazorise Chart Zoom component" Description="Learn to use and work with the Blazorise Zoom extension, Chart.js plugin for display labels on data for any type of charts." />

<DocsPageTitle Path="Extensions/Chart Zoom">
    Blazorise Chart Zoom
</DocsPageTitle>

<DocsPageLead>
    Zoom and pan the chart with the zoom plugin.
</DocsPageLead>

<DocsPageParagraph>
    <LicenseLimitationAlert LimitText="@($"{Licensing.BlazoriseLicenseProvider.DEFAULT_UNLICENSED_LIMIT_CHARTS_MAX_ROWS} points per chart")" />
</DocsPageParagraph>

<DocsPageParagraph>
    Zoom is made possible with the help of <Anchor To="https://www.chartjs.org/chartjs-plugin-zoom/latest/" Title="Link to chart Zoom plugin" Target="Target.Blank">chartjs-plugin-zoom</Anchor>.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install the charts extension and plugin from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ChartZoomNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static Files">
        Include the necessary files into your <Code>index.html</Code> or <Code>_Layout.cshtml</Code> / <Code>_Host.cshtml</Code> file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ChartZoomResourcesExample" />
    <DocsPageSectionContent FullWidth>
        <Alert Visible Color="Color.Warning">
            <AlertMessage>
                IMPORTANT
            </AlertMessage>
            <AlertDescription>
                chartjs-plugin-zoom must be loaded after the Chart.js library!
            </AlertDescription>
        </Alert>
        <Alert Visible Color="Color.Info">
            <AlertMessage>
                Note
            </AlertMessage>
            <AlertDescription>
                <Anchor To="https://hammerjs.github.io/" Title="Link to hammer.js" Target="Target.Blank">Hammer.js is used for gesture recognition</Anchor>.
            </AlertDescription>
        </Alert>
    </DocsPageSectionContent>
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ChartZoomExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ChartZoomExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(ChartZoom<>)]" />

<Heading Size="HeadingSize.Is3">
    Options
</Heading>

<DocsAttributes Title="ChartZoomPluginOptions">
    <DocsAttributesItem Name="Zoom" Type="ChartZoomOptions">
        Zoom options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pan" Type="ChartZoomPanOptions">
        Pan options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Limits" Type="ChartZoomLimitsOptions">
        Limits options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Transition" Type="ChartZoomTransition">
        Transition options
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomOptions">
    <DocsAttributesItem Name="Wheel" Type="ChartZoomWheel" Default="null">
        The Wheel options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Drag" Type="ChartZoomDrag" Default="null">
        The Drag options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pinch" Type="ChartZoomPinch" Default="null">
        The Pinch options
    </DocsAttributesItem>
    <DocsAttributesItem Name="Mode" Type="string" Default="null">
        Allowed zoom directions
    </DocsAttributesItem>
    <DocsAttributesItem Name="ScaleMode" Type="string" Default="null">
        Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomWheelOptions">
    <DocsAttributesItem Name="Enabled" Type="bool?" Default="null">
        Enable zooming via mouse wheel
    </DocsAttributesItem>
    <DocsAttributesItem Name="Speed" Type="double?" Default="null">
        Factor of zoom speed via mouse wheel
    </DocsAttributesItem>
    <DocsAttributesItem Name="ModifierKey" Type="string" Default="null">
        Modifier key required for zooming via mouse wheel
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomDragOptions">
    <DocsAttributesItem Name="Enabled" Type="bool?" Default="null">
        Enable drag-to-zoom
    </DocsAttributesItem>
    <DocsAttributesItem Name="BackgroundColor" Type="string" Default="null">
        Fill color
    </DocsAttributesItem>
    <DocsAttributesItem Name="BorderColor" Type="string" Default="null">
        Stroke color
    </DocsAttributesItem>
    <DocsAttributesItem Name="BorderWidth" Type="double?" Default="null">
        Stroke width
    </DocsAttributesItem>
    <DocsAttributesItem Name="Threshold" Type="double?" Default="null">
        Minimal zoom distance required before actually applying zoom
    </DocsAttributesItem>
    <DocsAttributesItem Name="ModifierKey" Type="string" Default="null">
        Modifier key required for drag-to-zoom
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomPinchOptions">
    <DocsAttributesItem Name="Enabled" Type="bool?" Default="null">
        Enable zooming via pinch
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomPanOptions">
    <DocsAttributesItem Name="Enabled" Type="bool?" Default="null">
        Enable panning
    </DocsAttributesItem>
    <DocsAttributesItem Name="Mode" Type="string" Default="null">
        Allowed panning directions
    </DocsAttributesItem>
    <DocsAttributesItem Name="ModifierKey" Type="string" Default="null">
        Modifier key required for panning with mouse
    </DocsAttributesItem>
    <DocsAttributesItem Name="ScaleMode" Type="double?" Default="null">
        Enable panning over a scale for that axis (regardless of mode)
    </DocsAttributesItem>
    <DocsAttributesItem Name="Threshold" Type="double?" Default="null">
        Minimal pan distance required before actually applying pan
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomLimitsOptions">
    <DocsAttributesItem Name="X" Type="ChartZoomScaleLimits" Default="null">
        Limits for x-axis
    </DocsAttributesItem>
    <DocsAttributesItem Name="Y" Type="ChartZoomScaleLimits" Default="null">
        Limits for y-axis
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="ChartZoomScaleLimitsOptions">
    <DocsAttributesItem Name="Min" Type="double?" Default="null">
        Minimum allowed value for scale.min
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="double?" Default="null">
        Maximum allowed value for scale.max
    </DocsAttributesItem>
    <DocsAttributesItem Name="MinRange" Type="double?" Default="null">
        Minimum allowed range (max - min). This defines the max zoom level.
    </DocsAttributesItem>
</DocsAttributes>